<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="退货商品">
      <div style="display: flex; padding: 10px 15px; border: 1px solid #e8e8e8">
        <el-image
          :src="goodsInfo.productPic"
          style="width: 80px; height: 80px; border-radius: 10px 10px 10px 10px"
          :preview-src-list="[goodsInfo.productPic]"
        ></el-image>
        <div
          style="
            line-height: normal;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 10px;
          "
        >
          <div>{{ goodsInfo.productName }}</div>
          <div>×{{ goodsInfo.productQuantity }}</div>
          <div>￥{{ goodsInfo.productPrice }}</div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="服务类型" prop="serviceType">
      <el-radio-group v-model="ruleForm.serviceType">
        <el-radio label="未发货仅退款" value="未发货仅退款"></el-radio>
        <el-radio label="已发货仅退款" value="已发货仅退款"></el-radio>
        <el-radio label="退货" value="退货"></el-radio>
        <el-radio label="补发" value="补发"></el-radio>
        <el-radio label="换货" value="换货"></el-radio>
        <el-radio label="拒收退货" value="拒收退货"></el-radio>
      </el-radio-group>
    </el-form-item>
    <template
      v-if="
        ['未发货仅退款', '已发货仅退款', '退货', '拒收退货'].includes(
          ruleForm.serviceType
        )
      "
    >
      <el-form-item label="退款原因" prop="reason">
        <el-select v-model="ruleForm.reason" placeholder="请选择退款原因">
          <el-option label="质量问题" value="质量问题"></el-option>
          <el-option label="尺码太大" value="尺码太大"></el-option>
          <el-option label="颜色不喜欢" value="颜色不喜欢"></el-option>
          <el-option label="7天无理由退货" value="7天无理由退货"></el-option>
          <el-option label="价格问题" value="价格问题"></el-option>
          <el-option label="发票问题" value="发票问题"></el-option>
          <el-option label="物流问题" value="物流问题"></el-option>
          <el-option label="发票问题" value="发票问题"></el-option>
          <el-option label="售后问题" value="售后问题"></el-option>
          <el-option label="其他问题" value="其他问题"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款金额" prop="returnAmount">
        <el-input
          type="number"
          v-model="ruleForm.returnAmount"
          disabled
        ></el-input>
      </el-form-item>
    </template>
    <el-form-item label="说明" prop="description">
      <el-input
        type="textarea"
        :autosize="{ minRows: 6 }"
        v-model="ruleForm.description"
        placeholder="说明"
      ></el-input>
    </el-form-item>
    <el-form-item label="上传图片" prop="proofPics">
      <el-upload
        class="avatar-uploader"
        :action="imgPath + '/common/upload/file'"
        list-type="picture-card"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :limit="3"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="    ">
      <el-button type="danger" @click="submitForm('ruleForm')" round
        >立即提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import imgPath from "@/utils/config";

export default {
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      imgPath: imgPath.imgPath,
      ruleForm: {
        serviceType: "",
        reason: "",
        returnAmount: "",
        description: "",
        proofPics: [],
      },
      rules: {
        returnAmount: [
          { required: true, message: "请输入退款金额", trigger: "blur" },
        ],
        serviceType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        reason: [
          {
            required: true,
            message: "请选择退款原因",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    goodsInfo: {
      handler(newVal, oldVal) {
        const totalPrice = newVal.productPrice * newVal.productQuantity;
        this.ruleForm.returnAmount = totalPrice;
        this.rules.returnAmount = [
          { required: true, message: "请输入退款金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (value > 0 && value <= totalPrice) {
                callback();
              }
              if (value <= 0) {
                callback(new Error("退款金额需大于0"));
              } else {
                callback(new Error("退款金额不能大于" + totalPrice));
              }
            },
          },
        ];
      },
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交申请吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              const params = {
                ...this.ruleForm,
                proofPics: this.ruleForm.proofPics.join(","),
              };
              this.$emit("submit", params);
            })
            .catch((e) => e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSuccess(data) {
      this.ruleForm.proofPics.push(data.data);
    },
    handleRemove(file, fileList) {
      this.ruleForm.proofPics = this.ruleForm.proofPics.filter(
        (item) => item !== file.response.data
      );
    },
    handleModify(info) {
      console.log(info);
      this.ruleForm = {
        serviceType: info.serviceType,
        reason: info.reason,
        returnAmount: info.returnAmount,
        description: info.description,
        proofPics: info.proofPics.split(","),
      };
    },
  },
};
</script>

<style lang="scss">
.el-input__inner,
.el-textarea__inner {
  border: none;
  background-color: #f5f7f9;
}
.avatar-uploader .el-upload {
  background-color: #f5f7f9;
  border: 1px dashed #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
  width: 110px;
  height: 110px;
}
.avatar-uploader-icon {
  width: 110px;
  height: 110px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 110px;
  height: 110px;
  display: block;
}
</style>
